<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HtmlArea Manager</title>
</head>
<body>


	<div class="container">
		<div class="page-header">
			<h1>富文本管理</h1>
		</div>
		<div class="panel panel-default">
			<div class="panel-body">
				<form class="form-inline" method="post" id="navigation_search_form">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="导航名称"
							id="keyword">
					</div>
					<button type="submit" class="btn btn-default">
						<i class="fa fa-search"></i> Search
					</button>
					<div class="pull-right">
						<button type="button" class="btn btn-success"
							id="navigation_create">
							<i class="fa fa-plus"></i> 新增
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">富文本列表</div>
			<div class="panel-body" id="navigation_list"></div>
		</div>
	</div>

	<div class="modal" id="navigation_modal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title"></h4>
				</div>
				<div class="modal-body"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary"
						id="navigation_modal_submit">
						<i class="fa fa-save"></i> Save
					</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/x-handlebars-template"
		id="navigation_table_template">
    {{#if data}}
        <table class="table table-hover" id="navigation_table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>地址</th>
                    <th>图标</th>
                    <th>叶子</th>
                    <th>排序码</th>
					<th>有效开始时间</th>
					<th>有效结束时间</th>
                    <th>创建用户</th>
                    <th>创建时间</th>
                    <th>最后更新用户</th>
                    <th>最后更新时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {{#data}}
                    {{> tr}}
                {{/data}}
            </tbody>
        </table>
    {{else}}
        <div class="alert alert-warning">Can not find any data!</div>
    {{/if}}
</script>

	<script type="text/x-handlebars-template-partial"
		id="navigation_table_tr_template">
    <tr data-id="{{itemId}}" data-name="{{itemName}}">
        <td>{{itemId}}</td>
        <td>{{itemName}}</td>
        <td>{{url}}</td>
        <td>{{icon}}</td>
        <td>{{leaf}}</td>
        <td>{{orderCode}}</td>
        <td>{{createdUser}}</td>
        <td>{{createdDate}}</td>
        <td>{{updateLastUser}}</td>
        <td>{{updateLastDate}}</td>
        <td>
            <button class="btn btn-xs btn-primary navigation_edit" title="Edit"><i class="fa fa-fw fa-edit"></i></button>
            <button class="btn btn-xs btn-default navigation_delete" title="Delete"><i class="fa fa-fw fa-trash-o"></i></button>
        </td>
    </tr>
</script>


	<script type="text/x-handlebars-template"
		id="navigation_modal_form_template">
	<form id="editor_html_area">
        <input type="hidden" id="itemId" value="{{itemId}}">
		<input type="hidden" id="parentId" value="{{parentId}}">
        <div class="form-group">
            <label for="itemName">名称:</label>
            <input type="text" value="{{itemName}}" class="form-control" id="itemName">
        </div>
        <div class="form-group">
            <label for="url">映射地址:</label>
            <input type="text" value="{{url}}" class="form-control" id="url">
        </div>
		
		<textarea name="content1" cols="100" rows="8" style="width:98%;height:200px;visibility:hidden;">
		</textarea>

        <div class="form-group">
            <div class="form-group">
            	<label for="orderCode">排序码:</label>
            	<input type="text" value="{{orderCode}}" class="form-control" id="orderCode">
        	</div>
        </div>
    </form>
</script>


	<link rel="stylesheet" href="../kindeditor/themes/default/default.css" />
	<link rel="stylesheet" href="../kindeditor/plugins/code/prettify.css" />
	<script charset="utf-8" src="../kindeditor/kindeditor-all.js"></script>
	<script charset="utf-8" src="../kindeditor/lang/zh-CN.js"></script>
	<script charset="utf-8" src="../kindeditor/plugins/code/prettify.js"></script>

	<script src="js/global.js"></script>
	<script src="js/HtmlAreaView.js"></script>
	<script src="js/HtmlAreaService.js"></script>

	<script>
		$(function() {

			// 显示所有产品
			//$('body').hide(); // 隐藏界面
			/*NavigationService.findNavigations(function() {
			    $('body').show(); // 显示界面
			});*/

			// 根据关键字查询产品
			$('#navigation_search_form').on('submit', function() {
				var keyword = $('#keyword').val().trim();
				NavigationService.findNavigationsByName(keyword);
				return false;
			});

			// 点击 Edit 按钮，弹出编辑产品对话框
			$(document).on('click', '#navigation_table .navigation_edit',
					function() {
						var $tr = $(this).closest('tr');
						var itemId = $tr.data('id');
						NavigationService.findNavigationById(itemId);
						$('#navigation_modal').modal('show');
						return false;
					});

			// 点击 Delete 按钮，删除产品
			$(document).on(
					'click',
					'#navigation_table .navigation_delete',
					function() {
						var $tr = $(this).closest('tr');
						var itemId = $tr.data('id');
						var name = $tr.data('name');
						console.warn(itemId, name);
						if (confirm('Do you want to delete this navigation? ['
								+ name + ']')) {
							NavigationService.deleteNavigationById(itemId);
						}
						return false;
					});

			// 点击 Create 按钮，弹出创建产品对话框
			$('#navigation_create').on('click', function() {
				var form = $('#editor_html_area').clone();
				var title = 'Create HtmlArea';
				var navigation = {
					itemId : 0,
					itemName : '',
					orderCode : '',
					icon : '',
					url : ''
				};

				NavigationView.renderNavigationModal(title, navigation);
				KindEditor.create('textarea[name="content1"]', {
					resizeType : 1,
					afterCreate : function() {
						this.sync();
					},
					//下面这行代码就是关键的所在，当失去焦点时执行 this.sync();  
					afterBlur : function() {
						this.sync();
					}
				});
				$('#navigation_modal').modal('show');

			});

			// 点击对话框中的 Save 按钮，创建或更新产品
			$('#navigation_modal_submit').on('click', function() {
				var id = $('#itemId').val();
				var navigation = {
					itemId : id,
					parentId : $('#parentId').val().trim(),
					itemName : $('#itemName').val().trim(),
					orderCode : $('#orderCode').val().trim(),
					icon : $('#icon').val().trim(),
					url : $('#url').val().trim()
				};
				//console.warn(id,navigation);
				if (id == 0) {
					NavigationService.createNavigation(navigation);
				} else {
					NavigationService.updateNavigation(navigation);
				}
				$('#navigation_modal').modal('hide');
			});
			//
		});
	</script>